<!--<a href="#/layui/prodList" class="layui-btn layui-btn-xs layui-btn-primary" style="margin: 20px 0 0 20px;">
  <i class="layui-icon">&#xe65c;</i>
</a>-->

<form action="" class="layui-form">
	<div class="layui-fluid">
		<div class="layui-card">
		
		<!--<div class="layui-container">-->
			<div class="layui-row">
		    <div class="layui-col-md12">
		    	<div class="layui-card-header">
		    		<h2>
		      	<a href="#/layui/prodList" class="layui-btn layui-btn-xs layui-btn-primary" style="margin: -0px 0 0 0;border: none;background-color: rgba(0,0,0,0);">
						  <i class="layui-icon">&#xe65c;</i>
						</a>
		      	产品信息
		      	</h2>
		      </div>
		      
		      <div class="layui-card-body">
		      	<div class="layui-form-item">
	      			<div class="layui-form-label">产品名称：<span class="haveTo">*</span></div>
	      			<div class="layui-input-block">
	      				<input type="text" name="prodName" class="layui-input prodName"  lay-verify="required" >
	      			</div>
	      		</div>
	      		<div class="layui-form-item">
	      			<div class="layui-form-label">产品售价：<span class="haveTo">*</span></div>
	      			<div class="layui-input-block">
	      				<input type="text" name="prodPrice" class="layui-input prodPrice" lay-verify="required|number" >
	      			</div>
	      		</div>
	      		<div class="layui-form-item">
	      			<div class="layui-form-label">产品摘要：</div>
	      			<div class="layui-input-block">
	      				<div class="prodInfo">
		      				<textarea name="" class="layui-textarea prodInfo_ta"  ></textarea>
		      				<div class="prodInfoLmt limit"><span id="advice_num">0</span> /50</div>
		      			</div>
	      			</div>
	      		</div>
	      		<div class="layui-form-item">
	      			<div class="layui-form-label">产品介绍：</div>
	      			<div class="layui-input-block">
	      				<div class="prodIntro">
		      				<textarea name="" class="layui-textarea prodIntro_ta" ></textarea>
		      				<div class="prodIntroLmt limit"><span id="advice_num2">0</span> /500</div>
		      			</div>
	      			</div>
	      		</div>
	      		<div class="layui-form-item">
	      			<div class="layui-form-label">产品封面图：</div>
	      			<div class="layui-input-block prodCover">
	      				<table class="layui-table" lay-size="lg" lay-skin="nob">
				      				<tbody>
				      					<tr>
				      						<td >
				      							<label for="" onclick="cover()">
				      								<img src="img/addImg.png" class="prodBg" style="width: 100px;height: 100px;" />
				      							</label>
				      						</td>
				      						<!--<td>
												<button class="layui-btn layui-btn-danger cover_delPic">删除</button>
				      						</td>-->
				      					</tr>
				      					<tr>
				      						<td>
				      							<input type="file" class="cover_input" id="coverInput" style="display: none;" onchange="uploadPhoto2(this)">   
				      						
				      							<!--<button type="button" class="layui-btn" id="test1" onclick="cover()">
												  <i class="layui-icon">&#xe67c;</i>添加图片
												</button>-->
												<button class="layui-btn layui-btn-danger delBg" type="button">删除</button>
				      						</td>
				      					</tr>
				      				</tbody>
				      			</table>
	      			</div>
	      		</div>
	      		<div class="layui-form-item">
	      			<div class="layui-form-label">产品详情图：</div>
	      			<div class="layui-input-block prodDetail">
	      				<table class="layui-table" lay-size="lg" lay-skin="nob">
				      				<tbody>
				      					<tr>
				      						<td class="prodDe_td" lay-filter="xiangqing">
				      						</td>
				      						<!--<td>
												<button class="layui-btn layui-btn-danger cover_delPic">删除</button>
				      						</td>-->
				      					</tr>
				      					<tr>
				      						<td>
				      							<input type="file" class="detail_input" style="display: none;" onchange="uploadPhoto3(this)">   
				      						
				      							<button type="button" class="layui-btn" id="test1" onclick="coverDetail()">
															  <i class="layui-icon">&#xe67c;</i>添加图片
															</button>
														<button class="layui-btn layui-btn-danger delDeImg" type="button">删除</button> 
				      						</td>
				      					</tr>
				      				</tbody>
				      			</table>
	      			</div>
	      		</div>
	      		<div class="layui-form-item">
	      			<div class="layui-form-label">是否上架：</div>
	      			<div class="layui-input-block">
	      				<select name="isPutaway" class="isPutaway" lay-verify="">
								  <option value="1">是</option>
								  <option value="0">否</option>
								</select>
	      			</div>
	      		</div>
	      		<div class="layui-form-item">
	      			<div class="layui-form-label"></div>
	      			<div class="layui-input-block">
	      				<button class="layui-btn confirm" lay-submit lay-filter="queding" type="button" >确定</button>
	      			</div>
	      		</div>
		      </div>
		      	
		      	
		      	<!--<table class="layui-table" lay-size="lg" lay-skin="nob">
				      
				      <tbody>
				      	<tr>
				      		<td class="small_td">产品名称：</td>
				      		<td>
				      			<table class="layui-table" lay-size="lg"  lay-skin="nob">
				      				<tbody>
				      					<tr>
				      						<td><input type="text" name="prodName" class="layui-input prodName input33"  lay-verify="required" > </td>
				      						<td><span class="haveTo">*</span></td>
				      					</tr>
				      					
				      				</tbody>
				      			</table>
				      			
				      		</td>
				      	</tr>
				      	<tr>
				      		<td class="small_td">产品售价：</td>
				      		<td>
				      			<table class="layui-table" lay-size="lg"  lay-skin="nob">
				      				<tbody>
				      					<tr>
				      						<td><input type="text" name="prodPrice" class="layui-input prodPrice input33" lay-verify="required|number" ></td>
				      						<td><span class="haveTo">*</span></td>
				      					</tr>
				      				</tbody>
				      			</table>
				      			
				      		</td>
				      		
				      	</tr>
				      	<tr>
				      		<td class="small_td">产品摘要：</td>
				      		<td class="">
				      			<table class="layui-table" lay-size="lg" lay-skin="nob">
				      				<tbody>
				      					<tr>
				      						<td>
				      							<div class="prodInfo">
								      				<textarea name="" class="layui-textarea prodInfo_ta input33" lay-verify="required" ></textarea>
								      				<div class="prodInfoLmt limit input33"><span id="advice_num">0</span> /50</div>
								      			</div>
				      						</td>
				      						<td><span class="haveTo">*</span></td>
				      					</tr>
				      				</tbody>
				      			</table>
				      			
				      			
				      		</td>
				      			
				      	</tr>
				      	<tr>
				      		<td class="small_td">产品介绍：</td>
				      		<td class="">
				      			<table class="layui-table " lay-size="lg" lay-skin="nob">
				      				<tbody>
				      					<tr>
				      						<td>
				      							<div class="prodIntro">
								      				<textarea name="" class="layui-textarea prodIntro_ta input33" lay-verify="required" ></textarea>
								      				<div class="prodIntroLmt limit input33"><span id="advice_num2">0</span> /500</div>
								      			</div>
				      						</td>
				      						<td><span class="haveTo">*</span></td>
				      					</tr>
				      				</tbody>
				      			</table>
				      			
				      			
				      		</td>
				      		
				      	</tr>
				      	<tr>
				      		<td class="small_td">产品封面图：</td>
				      		<td class="prodCover">
				      			<table class="layui-table" lay-size="lg" lay-skin="nob">
				      				<tbody>
				      					<tr>
				      						<td >
				      							<label for="" onclick="cover()">
				      								<img src="img/addImg.png" class="prodBg" style="width: 100px;height: 100px;" />
				      							</label>
				      						</td>
				      					</tr>
				      					<tr>
				      						<td>
				      							<input type="file" class="cover_input" id="coverInput" style="display: none;" onchange="uploadPhoto2(this)">   
				      						
												<button class="layui-btn layui-btn-danger delBg" type="button">删除</button>
				      						</td>
				      					</tr>
				      				</tbody>
				      			</table>
				      			
				      		</td>
				      	</tr>
				      	
				      	<tr>
				      		<td class="small_td">产品详情图：</td>
				      		<td class="prodDetail">
				      			<table class="layui-table" lay-size="lg" lay-skin="nob">
				      				<tbody>
				      					<tr>
				      						<td class="prodDe_td" lay-filter="xiangqing">
				      						</td>
				      					</tr>
				      					<tr>
				      						<td>
				      							<input type="file" class="detail_input" style="display: none;" onchange="uploadPhoto3(this)">   
				      						
				      							<button type="button" class="layui-btn" id="test1" onclick="coverDetail()">
															  <i class="layui-icon">&#xe67c;</i>添加图片
															</button>
														<button class="layui-btn layui-btn-danger delDeImg" type="button">删除</button> 
				      						</td>
				      					</tr>
				      				</tbody>
				      			</table>
				      			
				      		</td>
				      	</tr>
				      	
				      	
				      	<tr>
				      		<td class="small_td">是否上架：</td>
				      		<td>
				      			<div class="select25">
					      			<select name="isPutaway" class="isPutaway" lay-verify="">
												  <option value="1">是</option>
												  <option value="0">否</option>
												</select>
				      			</div>
				      		</td>
				      	</tr>
					  </tbody>
				      	
			      </table>-->
		    </div>
		    
		    <!--<div class="layui-col-md10">
		    	<div class="addFHBtn">
					<button class="layui-btn confirm" lay-submit lay-filter="queding" type="button" >确定</button>
				</div>
		    </div>-->
		    
		  </div>
		</div>
		</div>
	</div>
</form>

<script>
	let prodName = document.querySelector(".prodName");
	let prodPrice = document.querySelector(".prodPrice");
	let prodInfo_ta = document.querySelector(".prodInfo_ta");
	let prodIntro_ta = document.querySelector(".prodIntro_ta");
	let fenhuiIntro = document.querySelector(".fenhuiIntro");
	let isPutaway = document.querySelector(".isPutaway");
	let confirm = document.querySelector(".confirm");
	let prodBg = document.querySelector(".prodBg");
	let delBg = document.querySelector(".delBg");
	let prodDe_td = document.querySelector(".prodDe_td");
	let delDeImg = document.querySelector(".delDeImg");
	let photo = '';
	let photos = [];
	
	
	//字数限制
function limit(){
  var txtNote;//文本框
  var txtLimit;//提示字数的input
  var limitCount;//限制的字数
    this.init = function(){  
        txtNote = this.txtNote;   
        txtLimit = this.txtLimit;   
        limitCount = this.limitCount; 
        txtNote.maxLength = limitCount;
        txtNote.onkeydown = function(){txtLimit.innerText = txtNote.value.length;};
        txtNote.onkeyup = function(){txtLimit.innerText = txtNote.value.length;};
  } 
}

var aText = new limit();
aText.txtNote = prodInfo_ta;
aText.txtLimit = document.getElementById("advice_num");
aText.limitCount = 50;
aText.init()

var aText2 = new limit();
aText2.txtNote = prodIntro_ta;
aText2.txtLimit = document.getElementById("advice_num2");
aText2.limitCount = 500;
aText2.init()

delBg.addEventListener("click",function(){
	prodBg.setAttribute("src","")
	photo = "";
	console.log("HI")
})



		layui.use(['table', 'sidebar', 'form','route'], function () {
		var layer = layui.layer,
      table = layui.table,
      sidebar = layui.sidebar,
      route = layui.route,
      params = route.params(),
      form = layui.form;
      
      
   		let _obj = {
   			"Guid": "00000000-0000-0000-0000-000000000000",
			  "MemLoginId": localStorage.getItem("user"),
			  "Name": "",
			  "ShopPrice": 0,
			  "Biref": "",
			  "Presentation": "",
			  "CoverImage": "",
			  "DetailsImage": "",
			  "CreateUser": "",
			  "CreateTime": "",
			  "ModifyUser": "",
			  "ModifyTime": "",
			  "IsRecommend": 2,
			  "IsAudit": 2
   		}
      
      
      
      function _confirm (){
      	
						
						_obj.Name = prodName.value;
						_obj.ShopPrice = prodPrice.value;
						_obj.Biref = prodInfo_ta.value;
						_obj.Presentation = prodIntro_ta.value;
						_obj.IsAudit = $(".isPutaway").find("option:selected").val();
						_obj.CoverImage = photo;
//						console.log("多图",jointPic(photos))
						_obj.DetailsImage = jointPic(photos);
						
					console.log("_obj",_obj)
						if(params == null) {
//							var newData = {
//								MemLoginId:localStorage.getItem('user'),
//								Name:prodName.value,
//								ShopPrice:prodPrice.value,
//								Biref:prodInfo_ta.value,
//								Presentation:prodIntro_ta.value,
//								CreateUser: localStorage.getItem('user'),
//				  				CreateTime: getNowFormatDate(),
//				  				ModifyUser: localStorage.getItem('user'),
//				  				ModifyTime: getNowFormatDate(),
//							}
								
								_obj.CreateTime = getNowFormatDate();
								_obj.CreateUser = localStorage.getItem("user");
								console.log("_obj",_obj)
								DBHelper.Post("Admin_Xn_Product", _obj, function(data) {
									console.log(data)
									let index = layer.alert("操作成功",function(){
										window.location.href="#/layui/prodList"
										layer.close(index)
								})
								}, function(data) {
									
									console.log(data)
								})
								
						} else {
							_obj.Guid = params.id;
							
							_obj.ModifyUser = localStorage.getItem('user');
			  			_obj.ModifyTime = getNowFormatDate();
			  			
							console.log(params.id)
//							_obj.ModifyTime = new Date();
							DBHelper.Put("Admin_Xn_Product?id=" + params.id, _obj, function(data) {
								console.log(data)
								let index = layer.alert("操作成功",function(){
										window.location.href="#/layui/prodList"
										layer.close(index)
								})
							}, function(data) {
								console.log(data)
							})
						}
					}
      
      function renderForm(){
			  layui.use('form', function(){
			   var form = layui.form;//高版本建议把括号去掉，有的低版本，需要加()
			   form.render();
			  });
			}
      
      if(params){
      	DBHelper.Get("Admin_Xn_Product?id="+params.id,function(data){
      		console.log("data",data)
      		_obj = data
      		_obj.CreateTime = data.CreateTime;
      		prodName.value=data.Name;
      		prodPrice.value = data.ShopPrice;
      		prodInfo_ta.value = data.Biref;
      		prodIntro_ta.value = data.Presentation;
      		photo = data.CoverImage;
      		if(data.CoverImage){
      			prodBg.setAttribute("src",photo)
      		}else{
      			prodBg.setAttribute("src","img/addImg.png")
      		}
      		
      		$(".isPutaway").find("option[value='"+data.IsAudit+"']").prop("selected",true);
      		
//    		多图下载到本地,修改DetailsImage,prodDe_check,prodDe_td
      		if(data.DetailsImage){
      			photos = data.DetailsImage.split("|");
	      		photos.forEach((el,index)=>{
	      			prodDe_td.innerHTML += `
							<div class="prodDe_check">
								<img src="${el}" style="width: 100px;height: 100px;margin-bottom:20px;" />
								<input type="checkbox" name="prodDe_check" lay-skin="primary" value="${el}">
							</div>
							
							`
	      		})
	      		console.log("photos",photos)
      		}
//    		多图下载到本地结束
      		
      		
      		renderForm();
      		
      	},function(data){
      		console.log(data)
      	})
      }
      
//    confirm.addEventListener("click",_confirm)
			form.on('submit(queding)',_confirm)
      
      
      form.on('checkbox(xiangqing)',function(data){
      	debugger
      	console.log(data)
      })
      
      form.render()
	})

	
	//封面图片
	function cover(){
		$('.cover_input').click()
	}
//	详情图
	function coverDetail(){
		$('.detail_input').click()
	}

	function coverUpdata(file){
		var data = new FormData();
	    data.append("file", file.files[0]);
	    $.ajax({
	      url:DBHelper.host+'ImgUpload?MemLoginId='+localStorage.getItem('user'),
	      type: 'POST',
	      dataType: 'JSON',
	      beforeSend: function(request) {
			            
			            request.setRequestHeader("Authorization", 'bearer ' + localStorage.getItem("token"));
			        },
	      data: data,
	      cache: false,
	      processData: false,
	      contentType: false,
	      beforeSend: function(request) {
	          request.setRequestHeader("Authorization", 'bearer ' + DBHelper.getToken());
	          loadingImg()
	      },
	      success:function (res) {
	        $('.loading').remove()
	        success(res)
	      },
	      error:function (res) {
	        $('.loading').remove()
	        console.log(res)
	        alert('上传失败')
	      }
	    })

	}
	
	
	function uploadPhoto2(file) {
    console.log(file.files[0])

    var data = new FormData();
    data.append("file", file.files[0]);
    

    $.ajax({
      url:DBHelper.host+'/api/ImgUpload?MemLoginId=admit&ImagesType=',
      type: 'POST',
      dataType: 'JSON',
      data: data,
      cache: false,
      processData: false,
      contentType: false,
      beforeSend: function(request) {
          request.setRequestHeader("Authorization", 'bearer ' + DBHelper.getToken());
          loadingImg()
      },
			success:function(res){
//				let fhImg = document.querySelector(".fhImg");
//				console.log(res.Url)
//				fhImg.setAttribute("src",res.Url)
//				photo = res.Url;
				prodBg.setAttribute("src",res.Url)
				photo = res.Url;
				$('.loading').remove()
					console.log(res)
					
			},
			error:function(res){
				$('.loading').remove()
			}
    })
  }
	
	function renderForm(){
		  layui.use('form', function(){
		   var form = layui.form;//高版本建议把括号去掉，有的低版本，需要加()
		   form.render();
		   
		  });
		}
	
	
//	多图添加
//	删除按钮,修改delDeImg和prodDe_check
	delDeImg.addEventListener("click",function(){
		
			$.each($('input[name="prodDe_check"]:checked'),function(){
				photos.splice(photos.indexOf($(this).val()),1)
				console.log("$(this)",$(this).parent().remove())
			})
//			console.log(photos)
	})
//	每一个多图上传的方法都不一样,回调函数内容不一样
	function uploadPhoto3(file) {
    console.log(file.files[0])

    var data = new FormData();
    data.append("file", file.files[0]);
    

    $.ajax({
      url:DBHelper.host+'/api/ImgUpload?MemLoginId=admit&ImagesType=',
      type: 'POST',
      dataType: 'JSON',
      data: data,
      cache: false,
      processData: false,
      contentType: false,
      beforeSend: function(request) {
          request.setRequestHeader("Authorization", 'bearer ' + DBHelper.getToken());
          loadingImg()
      },
			success:function(res){
//				let fhImg = document.querySelector(".fhImg");
//				console.log(res.Url)
//				fhImg.setAttribute("src",res.Url)
//				photo = res.Url;
//				prodBg.setAttribute("src",res.Url)
				prodDe_td.innerHTML += `
				<div class="prodDe_check">
					<img src="${res.Url}" style="width: 100px;height: 100px;margin-bottom:20px;" />
					<input type="checkbox" name="prodDe_check" lay-skin="primary" value="${res.Url}">
				</div>
				
				`
				renderForm();
				photos.push(res.Url);
				$('.loading').remove()
//					console.log(res)
				console.log(photos)
			},
			error:function(res){
				$('.loading').remove()
			}
    })
  }
//	将图片转换成json串
	function jointPic(arr){
		let sum = '';
		arr.forEach((el,index)=>{
			sum += el+"|"
		})
		sum = sum.substring(0,sum.length-1)
		return sum;
	}
	
//	多图添加结束
	
</script>




	<style scoped>
		.small_td{
			width: 100px;
			text-align: right;
		}
		.prodDe_check{
			width: 100px;
			padding: 12px;
			text-align: center;
			display: inline-block;
			/*border: 1px solid black;*/
		}
		.haveTo{
			color: red;
		}
		.prodInfo{
			position: relative;
		}
		.fr{
			float: right;
		}
		.fl{
			float: left;
		}
		.clearfix::after{
			content: "";
			display: block;
			width: 100%;
			height: 0;
			clear: both;
		}
		.prodIntro{
			position: relative;
		}
		.limit{
			position: absolute;
			bottom: 5px;
			right: 0px;
			text-align: right;
			box-sizing: border-box;
			padding-right: 10px;
		}
		/*.limit{
			position: relative;
		}*/
		/*.limit>span{
			position: absolute;
			bottom: 5px;
			right: 10px;
		}*/
      	.title{
      		/*margin-left: 30px;*/
      		margin-top: 30px;
      	}
      	.checkBtn{
      		border-radius: 5px;
      		width: 100px;
      	}
      	.listBtns{
      		display: flex;
      		justify-content: space-between;
      		width: 100%;
      	}
      	.listBtn{
      		border-radius: 5px;
      	}
      	.addFHBtn{
      		text-align: center;
      		margin-top: 20px;
      		margin-bottom: 20px;
      	}
      	.addFHBtn button{
      		display: inline-block;
      		width: 300px;
      	}
      </style>
      
